<template>
    <div class="timing">
      <el-row style="margin-bottom:10px;">
        <el-col :span="24">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="服务名称">
              <el-input v-model="formInline.serverName" clearable placeholder="" />
            </el-form-item>
            <el-form-item>
              <el-button plain @click="()=>{
                page = 1
                getUserList()
              }"><Icon type="ios-search" />查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <!-- 按钮 -->
      <el-row style="margin-bottom:10px;">
        <el-col :span="24">
          <el-button type="primary" @click="addUser"><Icon type="md-add" />创建服务</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <ykhttb ref="httbRef" :btnIsShow="{
          detile: true,
          operate: true,
          del: true,
          power: false
      }" :table-col="tabUserList"
       :table-data="tableUserData"
       width="200"
        @getDataDetileInfo="getDataDetileInfo" 
        @deleteSelectData="deleteSelectData"/>
      <!-- 分页 -->
      <div style="text-align:right;margin-top:10px;">
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <el-dialog :close-on-click-modal="false" :title="title" width="25%" :visible.sync="dialogTableVisible">
        <!-- 名称和路径必输 -->
        <el-form v-if="dialogTableVisible" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px" class="demo-ruleForm autoClass">
          <el-form-item label="服务名称" prop="serviceName">
            <el-input v-model="ruleForm['serviceName']" :disabled="disFlag" clearable placeholder="" />
          </el-form-item>
          <el-form-item label="部署方式" prop="depWay">
            <el-input v-model="ruleForm['depWay']" :disabled="disFlag" clearable placeholder="" />
          </el-form-item>
        </el-form>
        <div v-if="!disFlag" style="text-align: center;">
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="resetForm('ruleForm')">返回</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import request from '@/utils/request'
  
  export default {
    components: {
      
    },
    data() {
      return {
        title:"创建服务",
        disFlag:false,
        ruleForm:{
          "depWay": "",
          "id": '0',
          "serviceName": ""
        },
        dialogTableVisible:false,
        depList: [],
        postList: [],
        formInline: {
          serverName: ''
        },
        tableUserData: [],
        tabUserList: [
          {
            key: 'serviceName',
            title: '服务名称 '
          },
          {
            key: 'depWay',
            title: '部署方式'
          },
          {
            key: 'createTime',
            title: '创建时间'
          },
          {
            key: 'updateTime',
            title: '更新时间'
          }
        ],
        total: 0,
        size: 10,
        page: 1
      }
    },
    created() {
    },
    mounted() {
      this.$nextTick(() => {
        this.getUserList()
      })
    },
    methods: {
      resetForm(formName){
        this.dialogTableVisible = false
        const o = {}
        let keys = Object.keys(this.ruleForm)
        keys.forEach((item,index)=>{
          const v = this.ruleForm[item]
          if (typeof (v) === 'string') {
            o[item] = ''
          } else if (typeof (v) === 'number') {
            o[item] = ''
          } else if (typeof (v) === 'object') {
            if (v instanceof Array) {
              o[item] = []
            } else{
              o[item] = {}
            }
          }
        })
        this.ruleForm = JSON.parse(JSON.stringify(o))
      },
      submitForm(){
        if(this.title=='创建服务'){
          delete this.ruleForm.id
        }
        let that = this
        request({
          url: '/ht-projectverity/app/saveUpdate',
          method: 'post',
          data:that.ruleForm
        }).then(res => {
          if (res.code == 200) {
            that.resetForm('ruleForm')
            that.getUserList()
          } else {
            that.$notify.error({
              title: '错误',
              message: res.msg
            })
          }
        })
      },
      deleteSelectData(v) {
        request({
          url: '/ht-projectverity/app/delAppServices',
          method: 'post',
          data:[v.id]
        }).then(res => {
          if (res.code == 200) {
            this.getUserList()
          } else {
            this.$notify.error({
              title: '错误',
              message: res.msg
            })
          }
        })
      },
      addUser() {
        this.title = '创建服务'
        this.resetForm()
        this.disFlag = false
        this.dialogTableVisible = true
      },
      getDataDetileInfo(v){
        this.title = ''
        this.disFlag = true
        let keys = Object.keys(this.ruleForm)
        keys.forEach((item,index)=>{
          this.$set(this.ruleForm,item,JSON.parse(v)[item])
        })
        this.dialogTableVisible = true
      },
      editRowData(v) {
        this.disFlag = false
        this.title = '修改服务'
        let keys = Object.keys(this.ruleForm)
        keys.forEach((item,index)=>{
          this.$set(this.ruleForm,item,JSON.parse(v)[item])
        })
        this.dialogTableVisible = true
      },
      handleSizeChange(v) {
        this.page = 1
        this.size = v
        this.getUserList()
      },
      handleCurrentChange(v) {
        this.page = v
        this.getUserList()
      },
      // 获取用户列表
      getUserList() {
        this.$refs.httbRef.isShowLoading(true)
        request({
          url: '/ht-projectverity/app/getAppServiceList',
          method: 'post',
          data:{
            "serviceName":this.formInline.serverName,
            "size": this.size,
            "page": this.page,
            "depWay": ""
          }
        }).then(res => {
          this.tableUserData = res.data.records
          this.total = res.data.total
          this.$refs.httbRef.isShowLoading(false)
        })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
    .timing{
      background:#fff;
      padding:20px;
    }
  </style>
  